<template>
  <view class="root">
    <view class="content-wrapper">
      <scroll-view scroll-y="true" class="scroll-wrapper" @scrolltolower="onScrollToLowerMaintenance">
        <view class="scroll-item" v-for="(item, index) in resultList" :key="index"
          @click="handleDetail('/specialtyBook/printingReport/printingReportDetail', item)">
          <view class="inner-item container-title">
            <view class="car-num">
              {{item.reasonForReporting}}
            </view>
            <view class="create-time">
              {{formatters(item.updateTime, "YY/MM/DD HH:mm")}}
            </view>
          </view>
          <view class="inner-item">
            <view class="inner-label">印刷时间:</view>
            <view class="inner-content">{{formatters(item.printTime, "YY/MM/DD HH:mm")}}</view>
          </view>
          <view class="inner-item">
            <view class="inner-label">印刷数量:</view>
            <view class="inner-content">{{item.printSum}}份</view>
          </view>
          <view class="inner-item">
            <view class="inner-label">印刷人员:</view>
            <view class="inner-content">{{item.printName ? item.printName : '--'}}</view>
          </view>
        </view>
        <view class="empty-text">{{ finishMaintenance ? '没有更多数据了~' : loading ? '正在加载...' : ''}}</view>
        <template v-if="!resultList.length">
          <u-empty mode="list" text="暂无内容！" :icon="`${baseImgUrl}no-icon2.png`"></u-empty>
        </template>
      </scroll-view>
    </view>
    <view class="button-wrapper">
      <navigator class="button-style" hover-class="none"
        :url="`/specialtyBook/printingReport/createPrintingReport?companyMessageId=${options.companyMessageId}`">
        异常印刷记录上报
      </navigator>
    </view>
  </view>
</template>

<script>
  import {
    maintenanceProntList
  } from '@/api/myself.js'
  import {
    formatters
  } from '@/utils/util.js'
  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        options: {},
        pageInfo: {
          pageNo: 1,
          pageSize: 50
        },
        resultList: [],
        maintenancePages: 0,
        finishMaintenance: false,
        loading: true
      }
    },
    onLoad(options) {
      this.options = options
    },
    onShow() {
      this.getMaintenanceRecordsList()
    },
    methods: {
      formatters,
      getMaintenanceRecordsList(type = 'init') {
        let params = {
          companyMessageId: this.options.companyMessageId,
          ...this.pageInfo
        }
        this.loading = true
        maintenanceProntList(params)
          .then((res) => {
            let records = res.result.records || []
            this.maintenancePages = res.result.pages
            if (type === 'init') {
              this.resultList = records
            }
            console.log(this.resultList)
            if (type === 'push') {
              this.resultList.push(...records)
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
      handleDetail(url, item) {
        let params = encodeURIComponent(JSON.stringify(item))
        uni.navigateTo({
          url: `${url}?params=${params}`
        })
      },
      onScrollToLowerMaintenance() {
        if (this.pageInfo.pageNo < this.maintenancePages) {
          this.pageInfo.pageNo++
        } else {
          this.finishMaintenance = true
          return uni.showToast({
            icon: 'none',
            title: '没有更多数据了~'
          })
        }
        this.getMaintenanceRecordsList('push')
      },
    }
  }
</script>

<style lang="scss">
  page {
    background: #f9f9f9;
  }
</style>
<style lang="scss" scoped>
  .root {
    display: flex;
    flex-direction: column;
    display: flex;
    flex-direction: column;
    height: 100%;

    .content-wrapper {
      padding: 23rpx 8rpx;
      flex-basis: 0;
      flex-grow: 1;
      flex-shrink: 1;
      height: 0;

      .scroll-wrapper {
        width: 100%;
        height: 100%;

        .scroll-item {
          background: #FFFFFF;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          padding: 28rpx;
          margin-bottom: 20rpx;

          .car-num {
            border-bottom: 1rpx solid #F3F3F3;
            font-weight: bold;
            font-size: 32rpx;
            color: #181818;
            height: 84rpx;
            display: flex;
            align-items: center;
          }

          .inner-item {
            margin-bottom: 14rpx;
            display: flex;

            &:last-child {
              margin-bottom: 0;
            }

            .inner-label {
              font-weight: 500;
              font-size: 26rpx;
              color: #999999;
              margin-right: 7rpx;
              flex-shrink: 0;
            }

            .inner-content {
              font-weight: bold;
              font-size: 28rpx;
              color: #101010;
            }
          }

          .container-title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .create-time {
              font-weight: 400;
              font-size: 26rpx;
              color: #999999;
            }
          }
        }
      }
    }

    .button-wrapper {
      height: 104rpx;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;

      .button-style {
        width: 640rpx;
        height: 80rpx;
        background: #2488F5;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 1rpx solid #306BD9;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 30rpx;
        color: #F9F9F9;
      }
    }

    .empty-text {
      text-align: center;
      font-weight: 500;
      font-size: 26rpx;
      color: #999999;
    }
  }
</style>